<template>
    <div class="programModify">
        <el-form 
            ref="ruleForm" 
            label-width="100px"
            :model="ruleForm"
            :rules="rules">
            <el-form-item label="小程序名称" prop="appid">
                <el-select v-model="ruleForm.appname" placeholder="请选择小程序名称" @change="handleChange">
                    <el-option label='请选择' value='' ></el-option>
                    <el-option :label=item.appname :value=item.appid v-for="(item,index) in options" :key="index">{{item.appname}}</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="模块名称" prop="moduleTitle">
                <el-input v-model="ruleForm.moduleTitle" placeholder="模块名称"></el-input>
            </el-form-item>
            <el-upload
                class="upload-demo"
                action="https://www.yyjpai.com/index/operate/uploadsImg"
                :on-success=handleAvatarSuccess
                name="file"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
            <el-form-item label="分享文案" prop="shareTitle">
                <el-input v-model="ruleForm.shareTitle" placeholder="请输入分享文案"></el-input>
            </el-form-item>
        </el-form>
       <el-button @click="submitForm('ruleForm')" size="medium" class="addSubimit">提交</el-button>
    </div>
</template>
<script>
import { AddData,getChannel } from '@/assets/js'
let _this
export default {
    data(){
        return {
            options:[],
            ruleForm:{//下拉选中
                appid:this.appid,
                appname:this.appname,
                moduleTitle:this.type,
                logo:this.imgUrl,
                shareTitle:this.title
            },
            rules:{//验证
                appid:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' }
                ],
                moduleTitle:[
                    { required: true, message: '请输入模块名称', trigger: 'blur' }
                ],
                shareTitle:[
                    { required: true, message: '请输入分享文案', trigger: 'blur' }
                ]
            }
        }
    },
    mounted:function(){
        getChannel(this)
        _this = this
    },
    methods:{
        handleChange:(e)=>{//下拉触发
            _this.ruleForm.appid = e
        },
        handleAvatarSuccess(res, file) {//上传成功之后
            this.ruleForm.logo = file.response.data.logo
        },
        submitForm:function(e){//点击提交
            var data = {
                appid:this.ruleForm.appid==''? this.appid:this.ruleForm.appid,
                id:this.id,
                imgUrl:this.ruleForm.logo == '' ? this.logo : this.ruleForm.logo,
                type:this.ruleForm.moduleTitle == '' ? this.type : this.ruleForm.moduleTitle,
                title:this.ruleForm.shareTitle == '' ? this.title : this.ruleForm.shareTitle
            }
            console.log(data)
            AddData(this,e,data,'share/editShare')
        }
    },
    props:['id',"appname","appid","type","title","imgUrl"],
}
</script>